<template>
    <el-container>
        <el-header>

            <h4>当前用户：管理员</h4>

            <el-dropdown>
            <span class="el-dropdown-link">
                {{admin.id}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
            </el-dropdown>

        </el-header>
        <el-container>
            <el-aside width="300px">
                <el-row>
                    <el-col :span="12" style="width:300px">
                        <el-menu
                        class="el-menu-vertical-demo"
                        background-color="#213e00"
                        text-color="#fff"
                        active-text-color="#87ceeb"
                        weight="200px"
                        :default-active="$route.path"
                        router>
                        <el-menu-item index="/dormitorymannager">
                            <i class="el-icon-office-building"></i>
                            <span slot="title">宿舍模块</span>
                        </el-menu-item>
                        <el-menu-item index="/homemastermannager">
                            <i class="el-icon-user"></i>
                            <span slot="title">宿管模块</span>
                        </el-menu-item>
                        <el-menu-item index="/addstudent">
                            <i class="el-icon-collection"></i>
                            <span slot="title">增加学生</span>
                        </el-menu-item>
                        </el-menu>
                    </el-col>
                </el-row>
            </el-aside>
            <el-main>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{path:'/'}">首页</el-breadcrumb-item>
                    <el-breadcrumb-item v-text="this.$router.currentRoute.name"></el-breadcrumb-item>
                </el-breadcrumb>
                <router-view class="routerView"></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    name:'Admin',
    data() {
        return {
            admin:{},
        }
    },
    methods:{
        logout(){
            localStorage.clear()
            this.$router.replace({path:'/'});
        },
    },
    mounted(){
        this.admin = JSON.parse(localStorage.getItem('admin'))
    }
}
</script>

<style scoped>
    .el-main{
        background-color: #ebeaea;
    }
    .el-header{
        display: flex;
        justify-content: space-between;
        background-color: rgb(69, 103, 0);
        line-height: 60px;
    }
    .el-header h4{
        margin: 0;
        color: wheat;
        text-align: left;
        font-size: 25px;
    }
    .el-dropdown{
        color: wheat;
    }
    .el-submenu span{
        width: 200px;
    }
    .el-button{
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
    .el-aside{
        height: 840px;
        background-color: rgb(69, 103, 0);
    }
    .routerView{
        padding: 20px;
        border-radius: 5px;
        position: relative;
        background-color: #fff;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        box-shadow: 3px 3px 6px 2px rgba(0, 0, 0, 0.5);
    }
</style>